<template>
<!--    <div>服务端档案挂接</div>-->
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4" :xs="24">
        <fileTrees @handleNodeClick="onTreeClick" :tableHeight="treeHeight" :isnoClick="isnoClick" :menuId="menuId"></fileTrees>
      </el-col>
      <el-col :span="20" :xs="24" v-show="isShowTable">
        <el-form :model="queryParams" ref="queryForm"  :inline="true" v-show="showSearch"
                 label-width="68px">
          <el-form-item label="匹配策略" prop="fielNumberField">
            <el-select v-model="queryParams.fielNumberField" placeholder="请选择" clearable>
              <el-option v-for="(dict, index) in mateOption" :key="index" :label="dict.label"
                         :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="重复策略" prop="repateOperationMode">
            <el-select v-model="queryParams.repateOperationMode" placeholder="请选择" clearable>
              <el-option v-for="(dict, index) in operationType" :key="index" :label="dict.label"
                         :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="挂接方式" prop="GJFS">
            <el-select v-model="queryParams.GJFS" placeholder="请选择">
              <el-option v-for="item in dict.type.GJFS" :key="item.value" :label="item.label" v-if="item.value!='LEVEL'"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择路径" prop="unZipPath">
            <el-input v-model="queryParams.unZipPath" clearable/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search"  @click="handleQuery">挂接</el-button>
            <el-button icon="el-icon-refresh"  @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        <!--        <metadata :list="list" :tableHeight="tableHeight" :loading="loading"-->
        <!--                  @handleSelectionChange="handleSelectionChange" @chanageFieldCaptionTap="getList"></metadata>-->
        <el-table v-loading="loading" :data="DataList" :height="tableHeight" >
          <el-table-column label="序号" type="index" align="center" prop="id"/>
          <el-table-column label="文件名" prop="docName" align="center" />
          <el-table-column label="文件大小" prop="docFileSize" align="center" />
          <el-table-column label="文件路径" prop="path" align="center" />
          <el-table-column label="是否挂接" prop="result" align="center" />
          <el-table-column label="未挂接原因" prop="failResult" align="center" />
          <el-table-column label="重复策略" prop="repeatOperMode" align="center" />
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="pageNum"
                    :limit.sync="pageSize" @pagination="getList" />
      </el-col>
    </el-row>
  </div>
</template>
<script>
import treeHeight from '@/mixins/treeHeight'//计算左侧树的高度
import estimateTableHeight from '@/mixins/estimateTableHeight'
import fileTrees from "@/components/fileTrees/index.vue"
import {
  getFileNumberField,
  getServerLogList,
  serverArticulated
} from "@/api/archive/digitalizeReceive/serverArchiveHook"
//vue项目中element-tabel自动计算高度
export default {
  mixins: [ treeHeight, estimateTableHeight ], // 混入方法
  archive_Dicts: [ 'GJFS'],
  components: { fileTrees },
  data(){
    return{
      menuId: '',
      isnoClick: true, //防止树重复点击
      DataList: [],
      // 表格数据
      list: null,
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      // 显示搜索条件
      showSearch: true,
      isShowTable: false,
      //默认展开的树节点
      expandedkeys: [],
      //默认选中的树节点
      currentNodekey: "",
      // 树选项
      deptOptions: undefined,
      defaultProps: {
        children: "children",
        label: "label"
      },
      // 挂接参数
      queryParams: {
        fielNumberField: undefined,
        unZipPath: undefined,
        repateOperationMode: undefined,
        GJFS: undefined
      },
      pageSize: 10,
      pageNum: 1,
      operationType: [
        {value: '1', label: '跳过'},
        {value: '2', label: '覆盖'},
        {value: '3', label: '追加'}
      ],
      // 匹配策略下拉
      mateOption: [],
      articulatedId: ""
    }
  },
  created() {
    this.menuId = this.$route.meta.menuId
  },
  methods: {
    // 树节点单击事件
    onTreeClick(data) {
      console.log(data)
      this.isnoClick=false;
      if (data.nodeType == null || data.nodeType == "t" || data.nodeType == "f") {
        this.isShowTable = false
        this.isnoClick=true;
        return;
      }
      this.isShowTable = true
      // 挂接参数
      this.queryParams = {
        fielNumberField: undefined,
        unZipPath: undefined,
        repateOperationMode: undefined
      }
      this.queryParams.categoryId = data.categoryId
      this.getMateOption();
      this.DataList = []
    },
    // 获取匹配策略下拉框
    getMateOption() {
      getFileNumberField({categoryId: this.queryParams.categoryId}).then(response=>{
        this.mateOption = response.data.map(item => {
          return {
            value: item.fieldName,
            label: item.fieldCaption
          }
        })
        this.isnoClick=true;
      })
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.DataList = []
    },
    /** 搜索按钮操作 */
    handleQuery() {
      if(this.queryParams.fielNumberField == undefined) {
        this.$modal.msgWarning("匹配策略不能为空");
        return;
      }
      if(this.queryParams.repateOperationMode == undefined) {
        this.$modal.msgWarning("重复策略不能为空");
        return;
      }
      if(this.queryParams.unZipPath == undefined) {
        this.$modal.msgWarning("路径不能为空");
        return;
      }
      serverArticulated(this.queryParams).then(response=>{
        this.$modal.msgSuccess(response.data.msg)
        this.articulatedId = response.data.articulatedId
        this.getList()
      })
    },
    getList() {
      if(this.articulatedId == ""){
        return
      }
      this.loading = true
      this.form = {
        id: this.articulatedId,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }

      getServerLogList(this.form).then(response=>{
        this.DataList = response.rows
        this.total = response.total

        for (let i = 0; i < response.rows.length; i++) {
          for (let j = 0; j < this.operationType.length; j++) {
            if(response.rows[i].repeatOperMode == this.operationType[j].value){
              this.DataList[i].repeatOperMode = this.operationType[j].label
            }
          }
        }
        this.loading = false
        this.isnoClick=true;
        console.log(this.isnoClick)
      })
    },
  }
}
</script>
